<template>
	<view class="item-box">
		<view class="item">
			<view class="content">
				<view :class="{'desc':true,'other':imgType===1}">
					<image src="@/static/send/success_icon.png" mode="" v-show="item.status*1===2&&imgType===0" class="img">
					</image>
					<image src="@/static/send/error_icon.png" mode="" v-show="item.status*1===3&& imgType===0" class="img">
					</image>
					<image src="@/static/send/income_icon.png" mode="" v-show="item.consumeType*1===2&&imgType===1" class="img">
					</image>
					<image src="@/static/send/disburse_icon.png" mode="" v-show="item.consumeType*1===1&&imgType===1" class="img">
					</image>
					<!-- 提现中 -->
					<image src="@/static/send/withdrawal_in_progress_logo.png" mode=""
						v-show="item.statusMsg==='提现中'&&imgType===0" class="img">
					</image>
					<image src="https://static.tianwandailian.cn/static/server/newimage/active_twb.png" mode=""
						v-show="item.logoTag==2" class="img">
					</image>
					<view class="" style="margin-left: 24rpx;">
						<view class="title">
							<slot name="title">
								{{ item.title }}
							</slot>
						</view>
						<view class="order">
							<slot name="order"></slot>
						</view>
						<view class="time">{{ item.transTime }}</view>
					</view>
				</view>
				<view class="amount" v-if="item.status!==3" :style="{color:item.consumeType*1===2?'#FF5C00':'#222222'}">
					{{item.consumeType*1===2?'+':'-'}}{{ item.amount.toFixed(2) }}
				</view>
				<view class="message" v-if="item.failReason">
					{{ item.failReason }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	defineProps({
		item: {
			type: Object,
			default: () => {},
		},
		imgType: {
			type: Number,
			default: 0
		}
	});
</script>

<style lang="scss" scoped>
	.item-box {
		display: flex;
		flex-direction: column;
		align-items: center;
	}


	.item {
		width: calc(100% - 64rpx);
		padding: 0 32rpx;

		>.content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #EAEAEA;
			padding: 32rpx 0;

			.desc {
				display: flex;
				align-items: center;

				.img {
					width: 84rpx;
					height: 84rpx;
				}

				.title {
					font-size: 30rpx;
					color: #222222;
					margin-bottom: 10rpx;
				}

				.order {
					font-size: 24rpx;
					color: #888;
					margin-bottom: 10rpx;
				}

				.time {
					font-size: 24rpx;
					color: #666666;
				}
			}

			.other {
				display: flex;
				align-items: normal;
			}

			.amount {
				font-size: 40rpx;
			}


		}

		.message {
			text-overflow: ellipsis;
			max-width: 180rpx;
			overflow: hidden;
			white-space: nowrap;
			font-size: 28rpx;
			font-weight: 400;
			color: #FF5C00;
		}

	}
</style>